<template>
    <section class="contianer">
        <el-row type="flex" justify="space-between">
            <!-- 顶部过滤列表 -->
            <div class="flights-content">
                <!-- 过滤条件 -->
                <FlightsFilters
                    v-if="flightsData.options"
                    :data="flightsData"
                    @setFilteredList="setFilteredList"
                />

                <!-- 分页组件 -->
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-size="pageSize"
                    :page-sizes="[2, 5, 10, 20, 100]"
                    :total="filteredList.length"
                    @current-change="currentChange"
                    @size-change="sizeChange"
                    :current-page="pageIndex"
                >
                </el-pagination>

                <!-- 航班头部布局 -->
                <FlightsListHead />

                <!-- 航班信息 -->
                <div class="list" v-if="dataList.length > 0">
                    <FlightsItem
                        v-for="(flight, index) in dataList"
                        :key="flight.id"
                        :data="flight"
                        @click.native="showFlight(index)"
                        :isShow="index == currentActive"
                    />
                </div>
                <div v-else>暂时没有数据</div>
            </div>

            <!-- 侧边栏 -->
            <FlightsAside />
        </el-row>
    </section>
</template>

<script>
    import FlightsListHead from "@/components/air/FlightsListHead";
    import FlightsItem from "@/components/air/FlightsItem";
    import FlightsFilters from "@/components/air/FlightsFilters";
    import FlightsAside from "@/components/air/FlightsAside";
    export default {
        components: {
            FlightsListHead,
            FlightsItem,
            FlightsFilters,
            FlightsAside,
        },
        data() {
            return {
                currentActive: null,

                flightsData: {},

                // 多一个数组存放筛选过后的数据
                filteredList: [],

                // 自己算出来应该显示的机票数据
                // dataList: [],
                // 当前页码
                pageIndex: 1,
                // 每页长度
                pageSize: 2,
            };
        },
        computed: {
            dataList() {
                // 因为这里面是页面进入时就执行, 不像之前可以在
                // 获取数据 .then 之后执行
                // 加一个判断, 有数据,就切割, 没数据就返回默认空数组即可
                if (!this.filteredList) {
                    return [];
                }

                const end = this.pageIndex * this.pageSize;
                const begin = end - this.pageSize;

                return this.filteredList.slice(begin, end);
            },
        },
        watch: {
            $route() {
                this.pageIndex = 1
                this.loadPage()
            }
        },
        created() {
           this.loadPage()
        },
        methods: {
            loadPage() {
                 this.$axios({
                url: "/airs",
                params: this.$route.query,
            }).then((res) => {
                console.log(res.data);
                this.flightsData = res.data;

                this.filteredList = [...this.flightsData.flights];

                // 当前翻到第几页, 结束就应该是页码乘以长度
                // 每页十条,
                // 第一页 10 结束
                // 第二页 20 结束
                // 第三页 30 结束
                // 开始就等于结束再减去一个长度

                // const begin = (this.pageIndex - 1) * this.pageSize
                // const end = begin + this.pageSize

                // this.dataList = this.getDataList()
            });
            },
            showFlight(index) {
                if (this.currentActive == index) {
                    this.currentActive = null;
                } else {
                    this.currentActive = index;
                }
            },
            currentChange(newIndex) {
                this.pageIndex = newIndex;
                // this.dataList = this.getDataList()
            },
            sizeChange(newSize) {
                this.pageSize = newSize;
                // this.dataList = this.getDataList()
            },
            // getDataList() {
            //     const end = this.pageIndex * this.pageSize;
            //     const begin = end - this.pageSize;

            //     return this.flightsData.flights.slice(begin, end);
            // }
            setFilteredList(newList) {
                this.filteredList = newList;
            },
        },
    };
</script>

<style scoped lang="less">
    .contianer {
        width: 1000px;
        margin: 20px auto;
    }

    .flights-content {
        width: 745px;
        font-size: 14px;
    }

    .aside {
        width: 240px;
    }
</style>